﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css"/>
</head>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="/logout">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <ul id="menu">
        <li><a href="/index" class="index_on"></a></li>
        <li id="lia1"><a href="/role_list" class="role_off"></a></li>
        <li id="lia2"><a href="/admin_list" class="admin_off"></a></li>
        <li id="lia3"><a href="/fee_list" class="fee_off"></a></li>
        <li id="lia4"><a href="/account_list" class="account_off"></a></li>
        <li id="lia5"><a href="/service_list" class="service_off"></a></li>
        <li id="lia6"><a href="/bill_list" class="bill_off"></a></li>
        <li id="lia7"><a href="/report_list" class="report_off"></a></li>
        <li><a href="/userInfo" class="information_off"></a></li>
        <li><a href="/userModifyPwd" class="password_off"></a></li>
    </ul>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="" method="">
        <!--查询-->
        <div class="search_add">
            <div>身份证：<input type="text" id="idcard_no" class="text_search"/></div>
            <div>账务账号：<input type="text" id="login_name" class="width100 text_search"/></div>
            <div>姓名：<input type="text"  id="real_name" class="width70 text_search"/></div>
            <div><input type="button" value="搜索" class="btn_search" id="searchBtn"/></div>
        </div>
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table>
                <tr>
                    <th class="width50">账单ID</th>
                    <th class="width70">姓名</th>
                    <th class="width150">身份证</th>
                    <th class="width150">账务账号</th>
                    <th class="width100">支付状态</th>
                    <th class="width50"></th>
                </tr>
                <tbody id="datalist">

                </tbody>

            </table>

            <p>业务说明：<br/>
                1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br/>
                2、只查询近 3 年的账单，即当前年和前两年，如2013/2012/2011；<br/>
                3、年和月的数据由 js 代码自动生成；<br/>
                4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。</p>
        </div>
        <!--分页-->
        <div id="pages">

        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <p>版权所有(C)云科技有限公司 </p>
</div>
</body>
<script src="/js/jquery-3.2.1.js"></script>
<script>
    rolepage();
    show();
    function show() {

        $.ajax({
            url: "/selectAllModules",
            type: "post",
            success: function (result) {

                if (result.indexOf("角色管理") == -1) {
                    document.getElementById("lia1").style.display = "none"
                }
                if (result.indexOf("管理员") == -1) {
                    document.getElementById("lia2").style.display = "none"
                }
                if (result.indexOf("资费管理") == -1) {
                    document.getElementById("lia3").style.display = "none"
                }
                if (result.indexOf("账务账号") == -1) {
                    document.getElementById("lia4").style.display = "none"
                }
                if (result.indexOf("业务账号") == -1) {
                    document.getElementById("lia5").style.display = "none"
                }
                if (result.indexOf("账单管理") == -1) {
                    document.getElementById("lia6").style.display = "none"
                }
                if (result.indexOf("报表") == -1) {
                    document.getElementById("lia7").style.display = "none"
                }


            }

        });
    }

    function getSearchData(result) {
        $("#datalist").html("");
        var pages = result.pages;
        var firstpage = result.firstPage;
        var prepage = result.prePage;
        var nextpage = result.nextPage;
        var lastpage = result.lastPage;
        var isfirstpage = result.isFirstPage;
        var islastpage = result.isLastPage;
        var roleList = result.list;

        if (isfirstpage) {
            prepage = firstpage
        }
        if (islastpage) {
            nextpage = lastpage;
        }
        for (var i = 0; i < roleList.length; i++) {
            var tr = $("<tr></tr>");
            var zdId = $("<td></td>").text(roleList[i].serviceId);
            var name = $("<td></td>").text(roleList[i].account.realName);
            var sfzh = $("<td></td>").text(roleList[i].account.idcardNo);
            var zwzh = $("<td></td>").text(roleList[i].account.recommenderId);
            var zfzt = $("<td></td>").text(roleList[i].status);
            var a1 = $("<a href='/bill_item?id=" + roleList[i].serviceId + "'></a>").text('明细');
            tr.append(zdId).append(name).append(sfzh).append(zwzh)
                    .append(zfzt).append(a1);
            $("#datalist").append(tr);
        }

        $("#pages").html("");
        var a11 = $("<a href='javascript:void(0)' onclick='spage(" + firstpage + ")'></a>").text("首页");
        var a12 = $("<a href='javascript:void(0)' onclick='spage(" + prepage + ")'></a>").text("上一页");
        $("#pages").append(a11).append(a12);
        for (var k = 1; k <= lastpage; k++) {
            $("#pages").append($("<a href='javascript:void(0)' onclick='spage(" + k + ")' >" + k + "</a>"));
        }
        var a13 = $("<a href='javascript:void(0)' onclick='spage(" + nextpage + ")'></a>").text("下一页");
        var a14 = $("<a href='javascript:void(0)' onclick='spage(" + lastpage + ")'></a>").text("尾页");
        $("#pages").append(a13).append(a14);
    }

    function getData(result) {
        $("#datalist").html("");
        var pages = result.pages;
        var firstpage = result.firstPage;
        var prepage = result.prePage;
        var nextpage = result.nextPage;
        var lastpage = result.lastPage;
        var isfirstpage = result.isFirstPage;
        var islastpage = result.isLastPage;
        var roleList = result.list;

        if (isfirstpage) {
            prepage = firstpage
        }
        if (islastpage) {
            nextpage = lastpage;
        }
        for (var i = 0; i < roleList.length; i++) {
            var tr = $("<tr></tr>");
            var zdId = $("<td></td>").text(roleList[i].serviceId);
            var name = $("<td></td>").text(roleList[i].account.realName);
            var sfzh = $("<td></td>").text(roleList[i].account.idcardNo);
            var zwzh = $("<td></td>").text(roleList[i].account.recommenderId);
            var zfzt = $("<td></td>").text(roleList[i].status);
            var a1 = $("<a href='/bill_item?id=" + roleList[i].serviceId + "'></a>").text('明细');
            tr.append(zdId).append(name).append(sfzh).append(zwzh)
                    .append(zfzt).append(a1);
            $("#datalist").append(tr);
        }

        $("#pages").html("");
        var a11 = $("<a href='javascript:void(0)' onclick='page(" + firstpage + ")'></a>").text("首页");
        var a12 = $("<a href='javascript:void(0)' onclick='page(" + prepage + ")'></a>").text("上一页");
        $("#pages").append(a11).append(a12);
        for (var k = 1; k <= lastpage; k++) {
            $("#pages").append($("<a href='javascript:void(0)' onclick='page(" + k + ")' >" + k + "</a>"));
        }
        var a13 = $("<a href='javascript:void(0)' onclick='page(" + nextpage + ")'></a>").text("下一页");
        var a14 = $("<a href='javascript:void(0)' onclick='page(" + lastpage + ")'></a>").text("尾页");
        $("#pages").append(a13).append(a14);
    }


    function rolepage() {
        $.ajax({
            url: "/servicepage",
            type: "post",
            data: {
                pageNum: 1,
                pageSize: 5,
            },
            success: function (result) {
                console.log(result.list);
                getData(result);
            }
        });
    }
    function page(pagenum) {
        $.ajax({
            url: "/servicepage",
            type: "post",
            data: {
                pageNum: pagenum,
                pageSize: 5
            },
            success: function (result) {
                getSearchData(result);
            }
        });
    }

        function searchpage() {
            $.ajax({
                url: "/servicesearch",
                type: "post",
                data: {
                    pageNum: 1,
                    pageSize: 5,
                    loginName: $("#login_name").val(),
                    idCardNo: $("#idcard_no").val(),
                    realName: $("#real_name").val()
                },
                success: function (result) {
                    console.log(result.list);
                    getSearchData(result);
                }
            });
        }
        function spage(pagenum) {
            $.ajax({
                url: "/servicesearch",
                type: "post",
                data: {
                    pageNum: pagenum,
                    pageSize: 5,
                    loginName: $("#login_name").val(),
                    idCardNo: $("#idcard_no").val(),
                    realName: $("#real_name").val()
                },
                success: function (result) {
                    getSearchData(result);
                }
            });
    }

    $("#searchBtn").click(function () {
        searchpage();
    });

</script>
</html>
